<template>
    <div class="flex flex-col componentsBox">
        <div class="componentsHeader flex">
            <svg width="14px" height="8px">
                <polygon points="0,0 10,0 5,5" style="fill:#EB8345;  stroke-width:1;" />
            </svg>
            <p>基础组件</p>
        </div>
        <div class="componentsContent flex">
            <div class="component" v-for="item in data">
                <div class="componentBlock" v-on:click="handleAddComponent(item.name,item.count,item.maxCount)"></div>
                <p>{{ item.name }}</p>
                <p class="counts">{{ item.count }}/{{ item.maxCount }}</p>
            </div>
        </div>
    </div>
</template>

<script setup>
    defineProps(['data'])
    const emit = defineEmits(['addComponent'])
    const handleAddComponent = (name,count,maxCount) => {
        if(count >= maxCount) return 
        console.log('aaa')
        emit('addComponent',name)
    }
</script>

<style scoped>
    .componentsBox{
        margin-bottom: 4vh
    }

    .componentsHeader{
        font-size: 12px;
        height: 14px;
        line-height: 14px;
        margin-top: 1.5vh;
    }

    .componentsHeader>svg{
        margin:4px 4px 0 8px ;
    }

    .componentsContent{
        flex-wrap: wrap;
        padding-left: 1.5vw;
    }

    .component{
        width: 40%;
        font-size: 12px;
        text-align: center;
        padding-top: 3.5vh;
        margin-left: 0.5vw;
    }

    .componentBlock{
        width: 4vw;
        height: 4vw;
        background-color:#eee ;
        margin: 0 auto 1vh;
    }

    .counts{
        color: #999;
    }
</style>